<template>
  <div class="info_config_page">
    <div class="common_form_search">
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
        class="form-inline"
      >
        <el-form-item label="订单号">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="承租人">
          <el-input
            v-model="searchForm.name"
            placeholder="请输入承租人"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单所属供应商">
          <el-input
            v-model="searchForm.shopName"
            placeholder="请输入订单所属供应商"
          ></el-input>
        </el-form-item>
        <!--  <el-form-item label="融资状态">
          <el-select
            v-model="searchForm.user_chain_status"
            clearable
            placeholder="请选择"
          >
            <el-option :value="0" label="未融资"></el-option>
            <el-option :value="1" label="已融资"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="创建时间">
          <my-date-picker ref="myDatePicker"></my-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="search()" type="primary"
            >查询</el-button
          >
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>

    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon
          style="margin-right: 15px"
          icon-class="list"
          :size="15"
        />数据列表
      </h5>
      <!-- <el-dropdown
        trigger="click"
        v-if="$hasMethod('#enable')"
        @command="handleCommand"
      >
        <el-button
          size="small"
          class="add-btn svg-btn"
        >
          <svg-icon
            icon-class="batch"
            :size="11"
          />批量操作
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-if="$hasMethod('#enable')"
            command="enable"
          >融资</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
    </div>
    <el-table 
      :data="tableData" 
      border 
      ref="multipleTable" 
      row-key="id"
    >
      <el-table-column
        align="center"
        type="selection"
        width="55"
        :selectable="
          (row, index) => {
            return row.rules !== '*';
          }
        "
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        fixed
        prop="order_no"
        label="订单号"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="rent_total"
        label="租金金额（元）"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="租期"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.payCount }}/{{scope.row.month_total}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="履约状态">
        <template slot-scope="scope">	
          <span>{{
            scope.row.rent_status.rent_status == 1
              ? "足额归还"
              : scope.row.rent_status.rent_status == 2
              ? "部分归还"
              : scope.row.rent_status.rent_status == 3
              ? "未归还"
              : scope.row.rent_status.rent_status == 4
              ? "退租" : "订单已完结"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="cert_name"
        label="承租人"
      />
      <el-table-column align="center" header-align="center" label="融资状态">
        <template>
          <span>{{ '未融资' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="shopName"
        label="订单所属供应商"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.shopname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        prop="create_time"
        label="创建时间"
        width="100"
      />
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <div class="operate_col">
            <el-button
              type="primary"
              size="small"
              @click="$router.push({ name: 'leaseCheckFinanc', params: { orderNo: scope.row.order_no } })"
            >
              查看
            </el-button>
            <!-- <el-button
              v-if="scope.row.user_chain_status === 0 && scope.row.trade_no != ''? true : false"
              @click="onChain(scope.row)"
              type="primary"
              size="small"
            >
              上链
            </el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <custom-page
      ref="customPage"
      :total="total"
      @getList="getList"
    ></custom-page>
  </div>
</template>

<script>
import { getFinancList } from "@/api/lease";
import customPage from "@/components/customPage";
import myDatePicker from "@/components/myDatePicker";
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      tableData: [],
      total: 0,
      searchForm: {
        orderNo: "",
        name: "",
        shopName: "",
        createTime: "",
      },
    };
  },
  created(){
    // this.$refs.multipleTable.clearSelection()
  },
  methods: {
    search() {
      const pickerVal = this.$refs.myDatePicker.getVal();
      if (pickerVal !== 'error') {
        this.searchForm.createTime = pickerVal;
        this.$refs.customPage.page = 1;
        this.getList();
      }
    },
    // 重置
    reset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset();
      }
      this.searchForm = Object.assign({});
      this.getList();
    },
    // 批量操作
    // handleCommand(command) {
    //   console.log('command',command)
    //   const list = this.$refs.multipleTable.selection;
    //   if (list.length === 0) {
    //     this.$message({
    //       message: "没有勾选项",
    //       type: "warning"
    //     });
    //     return;
    //   }
    //   const ids = list.map(item => item.id).join(',');
    //   if(command && command== 'enable'){
    //     this.$confirm("您确定要批量融资吗?", "批量融资", {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //     }).then(() => {
    //       delUserInfo({
    //         idStr: id,
    //       }).then((res) => {
    //         this.getList();
    //       });
    //     });
    //   }
    // },
    // 获取列表
    getList() {
        const { page, pageSize } = this.$refs.customPage;
        getFinancList({
          page,
          pageSize,
          ...this.searchForm
        }).then((res) => {
          this.tableData = res.data;
          this.total = res.total;
        });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
</style>
